<template>
    <article>
        <h4>汇率走势图</h4>
        <a-row>
            <a-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7" class="left-box">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th colspan="3">当前{{ currencyName }}兑人民币汇率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>当前汇率</td>
                            <td v-if="currencyName == '美元'">
                                {{isNull0(exchangeRateUSD.exchangeRate ? exchangeRateUSD.exchangeRate.toFixed(3) : null)}}
                            </td>
                            <td v-else-if="currencyName == '欧元'">
                                {{isNull0(exchangeRateEUR.exchangeRate ? exchangeRateEUR.exchangeRate.toFixed(3) : null)}}
                            </td>
                            <td v-else-if="currencyName == '泰国铢'">
                                {{isNull0(exchangeRateTHB.exchangeRate ? exchangeRateTHB.exchangeRate.toFixed(3) : null)}}
                            </td>
                            <td v-else-if="currencyName == '日元'">
                                {{isNull0(exchangeRateJPY.exchangeRate ? exchangeRateJPY.exchangeRate.toFixed(3) : null)}}
                            </td>
                        </tr>
                        <tr>
                            <td>{{ currencyName }}</td>
                            <td>100</td>
                        </tr>
                        <tr>
                            <td>人民币</td>
                            <td v-if="currencyName == '美元'">
                                {{isNull0(Math.round(exchangeRateUSD.boeConversionRate))}}
                            </td>
                            <td v-else-if="currencyName == '欧元'">
                                {{isNull0(Math.round(exchangeRateEUR.boeConversionRate))}}
                            </td>
                            <td v-else-if="currencyName == '泰国铢'">
                                {{isNull0(Math.round(exchangeRateTHB.boeConversionRate))}}
                            </td>
                            <td v-else-if="currencyName == '日元'">
                                {{isNull0(Math.round(exchangeRateJPY.boeConversionRate))}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </a-col>
            <a-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17" class="right-box">
                <div class="select-time clearfix">
                    <a-row style="width: 100%;">
                        <a-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
                            <a-range-picker
                                    format="YYYY-MM-DD"
                                    :disabledDate="disabledDate"
                                    :ranges="DateRanges"
                                    :defaultValue="[$moment(btime), $moment(etime)]"
                                    @change="timeChange"
                                    style="width: 300px"/>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" style="text-align: left" >
                            <a-button type="primary" icon="search" :disabled="queryDisabled" @click.stop="getExchangeRate">查询</a-button>
                        </a-col>
                    </a-row>
                </div>
                <div class="chartBox" id="exchange-rate-chart" v-show="!noDataShow"></div>
                <h4 ref="ExchangeRate_chart_NoData" v-show="noDataShow"></h4>
            </a-col>
        </a-row>

        <p v-show="false">{{get_exchange_rate}}</p>
        <p v-show="false">{{getEstateHouseDetails}}</p>

    </article>
</template>


<script>
    export default {
        data() {
            return {
                exchangeRateUSD: {},   //汇率数据——美元
                exchangeRateEUR: {},   //汇率数据——欧元
                exchangeRateTHB: {},   //汇率数据——泰铢
                exchangeRateJPY: {},   //汇率数据——日元
                currencyName: '美元',//本国货币name
                currencyID: 1316,//本国货币的id
                myEcharts: null,
                btime: this.$moment().month(this.$moment().month() - 1).startOf('month').valueOf(), // 查询-开始时间——上个月一号的00:00:00
                etime: this.$moment().month(this.$moment().month() - 1).endOf('month').valueOf(), // 查询-结束时间——上个月最后一天的23:59:59
                DateRanges: null,//预设常用的日期范围以提高用户体验
                queryDisabled: true, //查询按钮的disabled状态
                noDataShow: false, //详情数据——没有数据提示信息是否显示
            }
        },
        computed: {
            //从state获取汇率数据
            get_exchange_rate() {
                if(this.$store.getters.get_exchangeRate){
                    //取出美元的汇率数据
                    this.$store.getters.get_exchangeRate.forEach((i) => {
                        if(i.currencyName == '美元'){
                            this.exchangeRateUSD = i;
                        }else if(i.currencyName == '欧元'){
                            this.exchangeRateEUR = i;
                        }else if(i.currencyName == '泰国铢'){
                            this.exchangeRateTHB = i;
                        }else if(i.currencyName == '日元'){
                            this.exchangeRateJPY = i;
                        }
                    });
                }
                return this.$store.getters.get_exchangeRate
            },
            //从state获取新房详情数据
            getEstateHouseDetails() {
                if(this.$store.getters.get_EstateHouseDetails){
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_EstateHouseDetails).length != 0){
                        //判断countryName是否为美国，如果是泰国、希腊的房源，则不展示城市概况里的指数数据table和房价、租金走势图表，只展示汇率图表
                        if(this.$store.getters.get_EstateHouseDetails.countryName){
                            if(this.$store.getters.get_EstateHouseDetails.countryName == '美国'){
                                this.currencyName = this.exchangeRateUSD.currencyName;
                                this.currencyID = this.exchangeRateUSD.currencyId;
                            }else if(this.$store.getters.get_EstateHouseDetails.countryName == '希腊'){
                                this.currencyName = this.exchangeRateEUR.currencyName;
                                this.currencyID = this.exchangeRateEUR.currencyId;
                            }else if(this.$store.getters.get_EstateHouseDetails.countryName == '泰国'){
                                this.currencyName = this.exchangeRateTHB.currencyName;
                                this.currencyID = this.exchangeRateTHB.currencyId;
                            }else if(this.$store.getters.get_EstateHouseDetails.countryName == '日本'){
                                this.currencyName = this.exchangeRateJPY.currencyName;
                                this.currencyID = this.exchangeRateJPY.currencyId;
                            }

                            setTimeout(() => {
                                // 获取汇率走势数据
                                this.getExchangeRate();
                            },1000);
                        }
                    }
                }
                return this.$store.getters.get_EstateHouseDetails
            },
        },
        created() {},
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('exchange-rate-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });

            //预设常用的日期范围以提高用户体验
            let end = new Date();
            let oneWeekStart = new Date();
            let oneMonthStart = new Date();
            let threeMonthStart = new Date();
            oneWeekStart.setTime(oneWeekStart.getTime() - 3600 * 1000 * 24 * 7);//1周前
            oneMonthStart.setTime(oneMonthStart.getTime() - 3600 * 1000 * 24 * 30);//1月前
            threeMonthStart.setTime(threeMonthStart.getTime() - 3600 * 1000 * 24 * 90);//3月前
            this.DateRanges = {
                '1周前': [this.$moment(oneWeekStart), this.$moment(end)],
                '1月前': [this.$moment(oneMonthStart), this.$moment(end)],
                '3月前': [this.$moment(threeMonthStart), this.$moment(end)]
            };

        },
        methods: {
            // 选择日期——选项配置——只能选择今天之前的日期
            disabledDate(current) {
                return current && current > this.$moment().endOf('day');
            },
            //选择开始结束时间change事件
            timeChange(dates, dateStrings) {
                // console.log(dates, dateStrings)
                this.btime = dateStrings[0];
                this.etime = dateStrings[1];
                if(this.btime && this.etime){
                    this.queryDisabled = false;
                }else{
                    this.queryDisabled = true;
                }
            },
            // 获取汇率走势数据——默认取上个月的数据
            getExchangeRate(){
                this.$get(`/exchange/rate/list/${this.currencyID}?btime=${this.momentFormat(this.btime, 'YYYY-MM-DD')}&etime=${this.momentFormat(this.etime, 'YYYY-MM-DD')}`).then(res => {
                    if (res.status == 0) {
                        this.noDataShow = false;
                        this.ExchangeRate_echarts(res.data)
                    } else {
                        this.noDataShow = true;
                        this.$refs.ExchangeRate_chart_NoData.innerText = res.msg;
                    }
                });
            },
            //汇率走势图——折线图
            ExchangeRate_echarts(data){
                let dateList = data.map(item => {
                    return this.momentFormat(item['releaseTime'], 'YYYY-MM-DD');
                });
                let exchangeRateList = data.map(function (item) {
                    return item['exchangeRate'].toFixed(3);
                });

                let markPoint = {
                    data: [
                        {type: 'max', name: '最大值', symbolSize: 65, itemStyle:{ color: '#f44336'}},
                        {type: 'min', name: '最小值', symbolSize: 65, itemStyle:{ color: '#03a9f4'}}
                    ],
                    label:{
                        formatter: (param) => {
                            return (param.value).toFixed(3);
                        }
                    }
                };
                this.myEcharts.hideLoading();
                let that = this;
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['汇率']
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        }, {
                            show: true,
                            start: 0,
                            end: 100,
                        }
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: function (value) {
                                return that.isCurrencySymbol(that.currencyName) + value;
                            }
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        name: '汇率',
                        type: 'line',
                        data: exchangeRateList,
                        markPoint: markPoint,
                        sampling: 'average',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            width: 2
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#f6fdfb'
                            }, {
                                offset: 0.8,
                                color: '#ddf7ef'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        },
                        itemStyle: {
                            color: 'rgb(130, 223, 194)',
                            borderColor: 'rgba(130, 223, 194, 0.2)',
                            borderWidth: 12
                        },
                    }],
                    color: ['#40c3f9'],

                });
            }
        },
        components: {

        }
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        article {
            margin: 30px 0 0 0;
            >.ant-row{
                >.left-box{
                    > table {
                        width: 100%;
                        margin: 80px 0 0 0;
                        > thead {
                            >tr{
                                th{
                                    border: 1px solid #dddddd;
                                    text-align: center;
                                    vertical-align: middle;
                                    padding: 8px;
                                    line-height: 1.846;
                                }
                            }
                            background: #f9f9f9;
                        }
                        >tbody{
                            >tr{
                                >td{
                                    text-align: center;
                                    vertical-align: middle;
                                    font-size: 14px;
                                    padding: 8px;
                                    line-height: 1.846;
                                    border: 1px solid #dddddd;
                                }
                            }
                        }
                    }
                }
                >.right-box{
                    >.select-time {
                        margin: 10px 0;
                        display: flex;
                        justify-content: center;
                    }
                    > .chartBox {
                        width: 100%;
                        height: 350px;
                        margin: 30px 0 0 0;
                    }
                    > h5 {
                        text-align: center;
                        font-size: 20px;
                    }
                }
            }
        }
    }
</style>
